<template>
	<view class="device-scada">
		<web-view v-if="deviceInfo.guid && show" :src="scadaUrl"></web-view>
		<u-empty mode="data" :show="!deviceInfo.guid" marginTop="60" :text="$tt('deviceDetail.emptyNull')"></u-empty>
	</view>
</template>

<script>
	import projectConfig from '@/env.config.js';

	export default {
		name: "deviceScada",
		props: {
			show: {
				type: Boolean,
				default: false,
				required: true
			},
			device: {
				type: Object,
				default: null,
				required: true
			}
		},
		watch: {
			// 兼容小程序
			device: function (newVal, oldVal) {
				this.deviceInfo = newVal;
			},
			show: function (newVal, oldVal) {
				if (newVal) {
					if (this.deviceInfo.guid) {
						this.scadaUrl = this.getScadaUrl();
					}
				}
			},
		},
		data () {
			return {
				deviceInfo: {
					guid: ''
				},
				scadaUrl: ''
			};
		},
		mounted () {},
		methods: {
			getScadaUrl () {
				const { guid, serialNumber } = this.deviceInfo;
				let baseUrl = projectConfig.BASE_URL;
				// 去掉 '/prod-api/' 部分
				if (baseUrl.includes('prod-api')) {
					baseUrl = baseUrl.replace('/prod-api/', '/');
				}
				if (baseUrl.includes('8080')) {
					baseUrl = baseUrl.replace('8080', '80/');
				}
				const token = uni.getStorageSync('token');
				return baseUrl +
					`${'scada/topo/fullscreen'}?guid=${guid}&type=1&serialNumber=${serialNumber}&share=${token}`;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.device-scada {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 50px;
	}
</style>